React native nedir?
Ali Kılıç React Native Nedir?React Native, Facebook’un geliştirmiş olduğu mobil uygulama yazmak için yapılmış bir programlama çatısıdır. GitHub’ta 24/07/2018 tarihi ile 66.704 yıldızı bulunuyor ki bu çok büyük bir kitlenin React Native’i takip ettiğini ve kullandığını gösterir. React Native, sizin JavaScript yazarak native çıktı almanızı sağlar. Diğer web-view yaklaşımları dışında corss-platform’a native çıktısı almanız için çok güzel bir ortam.
Peki Nasıl?
Reac Native ile EcmaScript 6 ve EcmaScript 7’yi kullanırız. Tarayıcıların çoğu EcmaScript 5’i tanır bu yüzden bizim yazdığımız ES6 ve ES7 kodlarımızı ES5’e çeviren babel.js denilen bir kütüphane bulunur, bizde bu kütüphane sayesinde yeni söz dizimiyle yazar ve rahatlıkla çalışırız.
Örnek olarak;
//ES5 //ES6
function helloworld(){ function helloworld(){
this.msg = “Hello World”; this.msg = “Hello World”;
this.hello = function(params){ this.hello = (params) => {
return this.msg + hello return this.msg + hello
}.bind(this) }
} }
Görüldüğü üzere fonksiyon kavramı ES6 ile değişmiştir. Arrow function olarak adlandırılmıştır ve
= (params) => {} şeklinde kullanılır buda dış fonksiyonuda kapsadığı için dış fonksiyonu bind etmememize olanak sağlamaktadır. Ayrıca bu örnekte de aynı zamanda fonksiyonun nasıl parametre aldığınıda görüyoruz.
ES6-7 ile artık React Native’de de kullandığımız yeni değişken tanımlama şekilleri oluşmuştur.
JavaScript’te var olarak kullandığımız değişkenin yanına artık let ve const’da eklenmiştir. Const, yalnızca bulunduğu blok içinde geçerlidir ama let’e ile tanımladığınız bir değişkene tekrar atama yapabilirsiniz.
Örnek olarak;
const foo = “Hello Wolrd”;
let zoo = “World Hello”;
//hata yok
zoo = “Türkiye”;
//hata
foo = “Türkiye”
//hata yok
if(true){
foo = “Türkiye”;
}
React Native’de UI için React JS’i kullanırız.
Props Mantığı;
React JS’te props mantığı şu şekildedir.
const variable = (props) => {
return(
<button> { props.text } </button>
)
}
Dışardan text adında olan bir inputtan aldığı değeri döndüren bir fonksiyon.
State Mantığı;
State fonksiyonların tekrar render edilmesini sağlayan React JS’in bir değişkenidir. State yalnızca constructor içinde tanımlanır. State çalışabilmesi için fonskiyonumuzda render() metodunun olması gerekir.
Örnek olarak;
class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
open:false
};
}
}
React Native’in bir DOM yapısı olmadığında geliştiricler bu yapıya benzer bir başka yapı kurmşular.
Örnek olarak;
<div> için <View>
<button> için <Button>
<input> için <TextInput> olarak yapılmıştır.
React Navite’de style ile çalışmak gayet eğlencelidir. Tıpkı HTML’de bir <div> in yada <label> ın tag içinden style verebildiğimiz gibi React Native’de de DOM elemanları üzerinden yada dışardan oluşturduğumuz kendi fonksiyonumuzdan style’rimizi aktarabiliriz.
Örnek olarak;
DOM elemanının içinde
const func = () => {
return(
<View>
<Text style={ “backgroundColor”:”blue”, “fontSize”:”16” }></Text>
</View>
)
}
Şeklindedir.
Ayrı fonksiyon olarak
const func = () => {
return(
<View>
<Text style={ styles.text }></Text>
</View>
)
}
const styles = {
text:{
backgroundColor:”white”,
fontSize:20
}
}
Şeklindedir.
Bu örnekler üzerinden nasıl bir componenti import ettiğimizde görelim.
<Text> veya <View> DOM elemanlarımızı kullanmak istiyorsak
sayfanın başına
import React, { Component } from ‘react’;
import { Text, View } from ‘react-native’;
şeklinde elemanlarımızı import etmemiz gerekir. Burda ilk import ettiğimiz React JS ve komponentleri(örnek: state). İkinci olarakta react native’den gelen DOM elemanlarımızı import ediyoruz.
React Native’de dilersek kendi kompanentlerimizi oluşturup kullanabiliriz.
Örnek olarak ana dizinde my-component adında bir klasör oluşturup içine Header.js adında bir JavaScript dosyası oluşturuyoruz.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
const Header = () => {
return (
<View style={ styles.headerBar }>
<Text>HEADER</Text>
</View>
);
}
const styles = {
headerBar: {
fontSize: 50,
backgroundColor: '#30a7a7',
height: 50,
justifyContent: 'center',
alignItems: 'center',
shadowOpacity: 0.2,
shadowOffset: { width: 0, height: 2 }
}
}
export default Header;
Header.js dosyamızın içinde Header adında bir fonksiyon oluşturduk bu Hedaer bize telefonumuzda bir üst bar yapmış oldu.
Bu custom kompanentimizi kullanabilmek için başka bir değişle import edebilmemiz için dışarıya export etmemiz gerekiyor bunuda export default Header şeklinde yapıyoruz.
Ana App.js dosyamıza da aşağıdaki gibi import edip kullanıyoruz.
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Header from './my-component/Header'
export default class myClass extends Component
{
render(){
return (
<Header />
);
}
}
const styles = {
header: {
fontSize: 30,
backgroundColor: '#30a7a7',
height: 30,
justifyContent: 'center',
alignItems: 'center'
}
}
Bir React Native Proje olşuturmak;
React Native’i kurabilmemiz için gerekli olanlar,
Node JS,
Python2,
JDK,
Visual Studio
kurulumların ardından
React Native’in CLI ‘yını yüklememiz gerekli.
npm install -g react-native-cli komutu ile yükleyebilirsiniz
- Google APIs
- Android SDK Platform 23
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
Android Studio’dan yukarda yazan gerekli SDK ayarlarını yapmanız gerekli.
Son olarak sdk için ANDROID_HOME yolumuzu windowsa tanımlamamız gerekiyor.
Bunun için denetim masası -> sistem ve güvenlik -> sistem -> gelişmiş sistem koruması ->ortam değişkenlerinden yeni ekleye tıklayıp aşağıdaki resimdeki gibi ayarlarını yapıyoruz.
react-native init muhtesemProjem şeklinde ilk projenizi oluşturabilirsiniz.
